<template>
    <!-- 宠物资讯页面 -->
    <div>
       
            <div style="width: 70%;background-color: white;margin: 0 15%;padding: 0 20px;">
                <div style="font-size: 22px;height: 80px;line-height: 80px;">宠物资讯</div>
                <el-divider></el-divider>
                <div class="bottom_line" v-for="item in infoList">
                    <el-row>
                        <el-col :span="8">
                            <transition name="el-zoom-in-center">
                            <img :src="getImage(item.image)" style="width: 300px;">
                            </transition>
                        </el-col>
                        <el-col :span="16">
                            <a @click="toInfoDetail(item.id)" style="line-height: 1.5;">
                                <b>{{ item.title }}</b>
                            </a>
                            <div style="line-height: 30px;margin-top: 30px;">
                                <p>
                                    {{ item.content }}
                                </p>
                            </div>
                            <div style="margin-top: 40px;">
                                <span>{{ item.createTime }}</span>
                                <span style="margin-left: 200px;">发布人：{{ item.author }}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>

                <div style="padding: 10px 0;margin-top: 20px; text-align: center;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="page" :page-sizes="[3, 6, 9, 12]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            page: 1,
            pageSize: 6,
            total: 0,
            infoList: []
        }
    },
    created() {
        this.load()
    },
    methods: {
        getImage(image) {
            return "http://localhost:8081/common/download?name=" + image
        },
        toInfoDetail(id) {
            this.$router.push({ name: "InfoDetail", query: { id: id } })
        },
        handleSizeChange(pageSize) {//分页每页条数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(page) {//分页页码选择
            this.page = page;
            this.load();
        },
        load() {
            this.request.get("/information/page", {
                params: {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: ''
                }
            }).then(res => {
                console.log("res=>", res)
                this.infoList = res.data.records
                this.total = res.data.total
                this.infoList = this.infoList.map(item => {
                    item.content = item.content.slice(0, 80) + "......"
                    return item
                })
            })
        }
    },
}
</script>

<style lang="less" scoped>
a {
    text-decoration: none;
    font-size: 23px;
    color: black;
}

.bottom_line {
   

   

    p {
        margin: 0;
    }
}
</style>